<template>
    <div class="container">
        <!-- 设置 -->
        <div class="cofig">
            <img src="@/assets/images/icon/设置.svg" alt="">
        </div>

        <!-- 个人信息 -->
        <div class="personInfo">
            <!-- 简介区 -->
            <div class="profile">
                <!-- 头像 -->
                <img :src="userData.image" alt="" class="headPic">
                <!-- 昵称 -->
                <div class="nickname">
                    <p>{{store.state.user.userData.nickname}}</p>
                </div>
            </div>

            <!-- 社交信息：关注、粉丝、动态-->
            <div class="socialInfo">
                <!-- 关注 -->
                <div class="idol">
                    <p class="value">{{socialInfo.followsNum}}</p>
                    <p class="title">关注</p>
                </div>
                <!-- 粉丝 -->
                <div class="idol">
                    <p class="value">{{socialInfo.fansNum}}</p>
                    <p class="title">粉丝</p>
                </div>
                <!-- 动态 -->
                <div class="idol">
                    <p class="value">{{socialInfo.news}}</p>
                    <p class="title">动态</p>
                </div>
                
            </div>
            
        </div>

        <!-- 其他信息 -->
        <div class="otherInfo">
            
            <!-- 我的订单 -->
            <div class="myOrder">
                <!-- 头部区域 -->
                <div class="topDiv">
                    <p class="title">我的订单</p>
                </div>

                <!-- 订单详情导航 -->
                <div class="orderNav">
                    <!-- 待支付 -->
                    <div class="to-be-paid">
                        <img src="@/assets/images/stLine-credit-card-l.svg" alt="">
                        <p>待支付</p>
                    </div>
                    <!-- 待发货 -->
                    <div class="to-be-paid">
                        <img src="@/assets/images/iconPark-box.svg" alt="">
                        <p>待发货</p>
                    </div>
                    <!-- 待收货  -->
                    <div class="to-be-paid">
                        <img src="@/assets/images/iconPark-truck.svg" alt="">
                        <p>待收货</p>
                    </div>
                    <!--  退款/售后 -->
                    <div class="to-be-paid">
                        <img src="@/assets/images/iconPark-shield-add.svg" alt="">
                        <p> 退款/售后</p>
                    </div>
                </div>
            </div>

            <!-- 功能导航区 -->
            <div class="funcNav">
                <!-- 我的想租 -->
                <div class="myWant">
                    <img src="@/assets/images//iconPark-folder-focus-one.svg" alt="">
                    <p>我的收藏</p>
                </div>
                <!-- 我的小店 -->
                <div class="myShop">
                    <img src="@/assets/images//iconPark-shop.svg" alt="">
                    <p>我的小店</p>
                </div>
                <!-- 我的话题 -->
                <div class="myTopic">
                    <img src="@/assets/images/iconPark-messages-one.svg" alt="">
                    <p>我的拼租</p>
                </div>
                <!-- 浏览记录 -->
                <div class="viewHistory">
                    <img src="@/assets/images/iconPark-time.svg" alt="">
                    <p>浏览记录</p>
                </div>
            </div>
            
        </div>
        

        <!-- 底部导航 -->
        <CommonNav></CommonNav>

    </div>

    
    
</template>
    
<script setup>
    import CommonNav from '@/components/CommonNav.vue'
    import {useStore,mapState} from 'vuex'
    import { ref,onMounted,computed } from 'vue';
    import  useMapState  from '@/hooks/useMapState';
    
    const store = useStore();

    let fansNum =computed(()=>store.state.user.socialInfo.fansNum);
    //使用封装过的支持模块化的mapuser
    const {userData,socialInfo} = useMapState('user',['userData','socialInfo'])
    
    
    
</script>
    


<style lang="scss" scoped>
    .container{
    transition: none;
    width: 4.29rem;
    height: 100%;
    background-color: #EEFFD8;
    /* background-color: #759eaf; */
    position: relative;
    /* 设置 */
    .cofig{
        position: relative;
        img{
            position: absolute;
            top:0.44rem;
            right: 0.28rem;
            width: 0.28rem;
            height: 0.28rem;
            z-index: 2;
           /*  background-color: rgba(157, 199, 100, 1); */
        }
    }
    /* 个人信息区 */
    .personInfo{
        background-color: #6FA11E;
        position: relative;
        width: 4.28rem;
        height: 3.02rem;
        /* 简介 */
        .profile{
            text-align: center;
            height: 1.86rem;
            /* background-color: orange; */
            img.headPic{
                position: absolute;
                left: 1.72rem;
                top: 0.65rem;
                width: 0.84rem;
                height: 0.84rem;
                border-radius: 0.90rem 0.90rem 0.90rem 0.90rem; 
            }
            .nickname{
                position: absolute;
                top: 1.66rem;
                width: 100%;
                height: 0.28rem;
               /*  background-color: pink; */
                text-align: center;
                p{
                    font-size: 0.20rem;
                    font-family: PingFang SC, PingFang SC-Bold;
                    font-weight: bold;
                    text-align: CENTER;
                    color: #ffffff;
                    line-height: 20px;
                } 
            }

        }
        /* 社交信息 */
        .socialInfo{
            margin-top:0.1rem;
            display: flex;
            justify-content: center;
            >div{
                
                width: 1rem;
                white-space: nowrap;
                text-align: center;
                p{
                    font-size: 0.14rem;
                    color: #ffffff;
                }
                p.title{
                    opacity: 0.8;
                }
            }

        }      
    }

    /* 其他信息 */
    .otherInfo{
        position: absolute;
        top:2.51rem;
        z-index: 3;
        height: 6.75rem;
        width: 4.28rem;
        background: #f2f2f2;
        border-radius: 50px 50px 0px 0px;

        /* 我的订单 */
        .myOrder{
            position: relative;
            width: 4.28rem;;
            border-radius: 0.3rem;
            height:  1.95rem;
            
            /* 头部区域 */
            .topDiv{
                height: 0.43rem;
                /* 小标题 */
                p{
                    position: absolute;
                    top:0.64rem;
                    left: 0.54rem;
                    display: inline-block;
                    color: rgba(88, 113, 54, 1);
                    font-size: 0.20rem;
                    font-weight: bold;
                    width: 0.72rem;
                    height: 0.26rem;
                    white-space: nowrap;
                }
            }
            /* 订单详情导航 */
            .orderNav{
                position: absolute;
                left: 0.29rem;
                top:0.95rem;
                width: 3.71rem;
                height: 1.04rem;
                opacity: 0.77;
                background: #ffffff;
                border-radius: 30px;
                display: flex;
                justify-content: space-evenly;
                align-items: center;
                margin-top: 0.1rem;
                >div{
                    text-align: center;
                    img{
                        width: 0.31rem;
                        height: 0.31rem;
                    }
                    p{
                        margin-top:0.09rem;
                    }
                }
                
            }
        }

         /* 功能导航区 */
        .funcNav{
            position: absolute;
            top:2.33rem;
            left: 0.29rem;
            width: 3.71rem;
            height: 2.08rem;
            background: #ffffff;
            border-radius: 30px;

            >div{
                display: flex;
                align-items: center;
                margin-left: 0.41rem;
                margin-top: 0.15rem;
                img{
                    width: 0.3rem;
                    height: 0.3rem;
                }
                p{
                    margin-left: 0.19rem;
                    line-height: 0.3rem;

                }
            }
        }

        /* 我的服务 */
        .myServe{
            height: 2.73rem;
            margin-top: 0.16rem;;
            border-radius: 0.30rem;
            background-color: rgba(255, 255, 255, 1);
            border: 0.01rem solid rgba(187, 187, 187, 1);
            /* 头部区域 */
            .topDiv{
            position: relative;
            height: 0.43rem;
            /* 小标题 */
            p{
                display: inline-block;
                color: rgba(88, 113, 54, 1);
                font-size: 0.18rem;
                font-weight: 600;
                width: 0.72rem;
                height: 0.26rem;
                white-space: nowrap;
                margin-left: 0.14rem;
                margin-top: 0.12rem;
            }
            }

            /* 服务详情 */
            ul.serveDetail{
                >li{
                    position: relative;
                    height: 0.54rem;
                    line-height: 0.54rem;
                    border-bottom: 0.02rem solid rgba(187, 187, 187, 1);;
                    img{
                        margin:0.16rem 0.05rem auto 0.3rem;
                        width: 0.24rem;
                        height: 0.24rem;
                    }

                    span{
                        position: absolute;
                        display: inline-block;
                        line-height: 0.54rem;
                        color: rgba(136, 136, 136, 1);
                        font-size: 0.18rem;                   
                    }
                    

                }
            }
        }

        /* 其他服务 */
        ul.ohterServe{
            >li{
                position: relative;
                height: 0.44rem;
                border-bottom: 1px solid rgba(187, 187, 187, 1);
                p{
                    position: absolute;
                    line-height: 0.44rem;
                    left: 0.18rem;
                    height: 0.2rem;
                    font-size: 0.14rem;
                }   
            }
        }
    }
    



}
</style>